<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box .item {
            width: 1000px;
            display: flex;
            margin: 0 auto;
            border-bottom: 1px solid #000;
            justify-content: space-between;
        }

        .item p {
            width: 300px;
            margin-top: 10px;


        }

        .active {
            background-color: orange;
            color: #fff;
        }
    </style>
</head>

<body>

    <h2>留言列表</h2>
    <a href="./88新增留言.html">新增</a>
    <div class="box">
        <!-- <div>
            <p></p>
            <p></p>
            <button>删除</button>
        </div> -->
    </div>
    <!-- 分页 -->
    <div class="page"></div>

    <script>

        console.log(localStorage.getItem("token"));
        let p = 1; //代表页码
        //获取列表方法
        function getList() { //p 是页码
            let xhr = new XMLHttpRequest();
            xhr.open("get", "http://wish.byesame.com/wish?page=" + p + "&rows=10")
            xhr.setRequestHeader("token", localStorage.getItem("token"))
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    let data = JSON.parse(xhr.responseText)
                    console.log(data);
                    if (data.code == 200) {
                        pageFun(data.data.count, p); //根据传入的数据数量生成分页

                        let list = data.data.list;
                        document.querySelector(".box").innerHTML = ""; //删除box 中所有节点 添加之前先清空
                        // 真正的删除不是我们去删除具体的节点 而是 发送要删除的id 给后端 然后获取最新的列表即可
                        for (let i = 0; i < list.length; i++) {
                            let div = document.createElement("div")
                            let p1 = document.createElement("p")
                            let p2 = document.createElement("p")
                            let btn = document.createElement("button")
                            btn.setAttribute("data-id", list[i].id) //将每次遍历到的id 绑定在按钮的自定义属性身上
                            btn.onclick = deleteFun
                            p1.innerText = list[i].name;
                            p2.innerText = list[i].content;
                            btn.innerText = "删除";
                            div.appendChild(p1)
                            div.appendChild(p2)
                            div.appendChild(btn)
                            div.className = "item";
                            document.querySelector(".box").appendChild(div);

                        }

                    } else {
                        //错误提示
                        window.open("./86登陆.html","_self")
                    }
                }
            }
        }
        getList() //页面刚打开默认获取第一页
        // 删除方法
        function deleteFun() {
            let id = this.getAttribute("data-id")

            let xhr = new XMLHttpRequest();
            xhr.open("delete", "http://wish.byesame.com/wish")
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.setRequestHeader("token", localStorage.getItem("token"))
            xhr.send("id=" + id);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    let d = JSON.parse(xhr.responseText)
                    console.log(d);
                    if (d.code == 200) {
                        console.log("删除成功");
                        getList(); //重新调用接口 为了获取最新数据 根据最新数据 渲染节点 来更新列表的功能 也就是删除
                    }
                }
            }
        }


        // 因为我每次点击分页  都会再次调用 getList 里面又会调用分页 每次分页前都会删除 所有节点  重新开始创建节点 导致节点上的类名丢失了

        function pageFun(total = 0) {
            let page = document.querySelector(".page")
            page.innerHTML = ""; //删除所有节点
            if (total >= 100) {
                //再创建新的节点
                for (let i = 0; i < 10; i++) {
                    let b = document.createElement("button");
                    console.log("ppppppppp", p);
                    b.onclick = function () {
                        p =  i + 1;
                        getList()
                    }
                    b.innerText = i + 1
                    page.appendChild(b);
                }
                let al = document.querySelectorAll(".page button");
                // 获取所有 page 下的 button 节点
                // p 代表 页码
                // 假设 点击了 第5页  获取下标为4的节点
                al[Number(p)-1].className = "active";
                // 获取所有button 中 页码-1位置的节点  并添加类名
            } else {
                let a = Math.floor(total / 10);
                let b = total % 10 > 0 ? 1 : 0;
                let c = a + b; //需要c 页
                for (let i = 0; i < c; i++) {
                    let b = document.createElement("button");
                    if (i == 0 && p == 1) {
                        b.className = "active";
                    }
                    b.onclick = function () {
                        p =  i + 1;
                        getList()
                    }
                    b.innerText = i + 1
                    page.appendChild(b);
                }
                let al = document.querySelectorAll(".page button");
               
                al[Number(p)-1].className = "active";
            }
        }



        // 分页显示 10个按钮 （如果数据大于 100 就显示10按钮） 如果数据小于100 要显示对应数量的按钮数据 如 89 9个按钮 82数据 9个
        // 新增
    </script>

</body>

</html>